<template>
	<view class="custom-find" @click="jumpFind(message)">
		<image class="custom-find-image"
			:src="cdn(message.payload.custom.imgUrl)" mode="aspectFill"></image>
		<image class="custom-find-type-1"
			v-if="message.payload.custom.file_type === 'video'"
			src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250317/61e4df02059576691e1cc9526b11f32d.png">
		</image>
		<image class="custom-find-type-2" v-else
			src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250317/a0e451192bcfaa4cb87e4982e6e01118.png">
		</image>
		<view class="custom-find-user ss-flex align-center">
			<image class="custom-find-user-image" :src="message.payload.custom.user_avatar"
				mode="aspectFill"></image>
			<view class="custom-find-user-text ss-line-1">
				{{message.payload.custom.user_nickname}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {cdn,udid} from '@/im/config/index.js'
	import $store from '@/im/store/im';
	
	const props = defineProps({
		message: {
			type: Object,
			default: {}
		}
	})
	
	const jumpFind = (msg) => {
		let params = msg.payload.custom.linkUrl.split('?')[1]
		let url = ''
		if (msg.payload.custom.file_type === 'video') {
			url = `${$store().url_data.im_find_video_link}?${params}`
		} else {
			url = `${$store().url_data.im_find_image_link}?${params}`
		}
		console.log('url',url)
		uni.navigateTo({
			url:url
		})
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	
	.custom-find {
		width: 330rpx;
		height: 390rpx;
		border-radius: 6rpx;
		background-color: #fff;
		position: relative;
	
		.custom-find-image {
			width: 330rpx;
			height: 390rpx;
			border-radius: 6rpx;
		}
	
		.custom-find-type-1 {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 166rpx;
			left: 136rpx;
		}
	
		.custom-find-type-2 {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	
		.custom-find-user {
			width: 100%;
			padding: 0 20rpx;
			position: absolute;
			left: 0;
			bottom: 14rpx;
	
			.custom-find-user-image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}
	
			.custom-find-user-text {
				font-size: 24rpx;
				font-weight: 350;
				color: #FFFFFF;
			}
		}
	}
</style>